<template>
  <div class="m-header">
    <!-- <div class="icon">
      <i class="iconfont iconcatlogo"></i>
    </div>-->
    <div class="newicon"></div>
    <!-- <h1 class="text">皮皮音乐</h1> -->
    <!-- 用户个人中心: -->
    <router-link class="mine" to="/user" tag="div" v-if="userInfo">
      <i class="iconfont icon-mine icongeren"></i>
    </router-link>
    <!-- <div class="user-avatar" v-lazy:background-image="userInfo.avatarUrl" >
      
    </div>-->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"])
  }
};
</script>

<style  lang="less" scoped>
.m-header {
  position: relative;
  height: 44px;
  text-align: center;
  color: @mc;
  font-size: 0;
  z-index: 6;
  .icon {
    display: inline-block;
    vertical-align: top;

    width: 36px;
    height: 36px;
    margin-right: 1px;
    margin-top: 4px;
    position: relative;
    // background-color: @mc;
    border-radius: 50%;
    i {
      .posc;
      font-size: 20px;
    }

    // .bg-image("logo");
    // background-size: 32px 32px;
  }
  .newicon {
    height: 32px;
    width: 100%;
    background: url("Logo6.png") no-repeat center center;
    background-size: contain;
    position: relative;
    top: 5px;
  }
  .text {
    display: inline-block;
    vertical-align: top;
    line-height: 44px;
    font-size: @font-size-large;
  }
  .user-avatar {
    position: absolute;
    top: 0;
    font-size: 22px;
    right: 0;
    width: 60px;
    height: 60px;
    .bz(contain);
    border-radius: 50%;
  }
  .mine {
    position: absolute;
    top: 0;
    right: 0;

    .icon-mine {
      display: block;
      padding: 12px;
      font-size: 22px;
      color: @mc;
    }
  }
}
</style>